<template>
  <el-container>
    <el-header class="header">
      <el-menu class="menu" :default-active="defaultActive" mode="horizontal" background-color="#1f293d"
        text-color="#ffffff" active-text-color="#ffffff" router>
        <el-menu-item style="min-width: 72px;" index="Connection" :route="{ name: 'Connection' }">连接</el-menu-item>
        <el-menu-item style="min-width: 72px;" index="Help" :route="{ name: 'Help' }">帮助</el-menu-item>
        <div class="flex-1"></div>
        <el-menu-item class="dropdown" index="">
          <el-dropdown @command="handleCommand" trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right" style="margin-left: 0; margin-right: 0; color: #ffffff;"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="frontend">
                前端解析
                <i v-if="mode === 'frontend'" class="el-icon-check" style="margin-left: 5px; margin-right: 0;"></i>
              </el-dropdown-item>
              <el-dropdown-item command="backend">
                后端解析
                <i v-if="mode === 'backend'" class="el-icon-check" style="margin-left: 5px; margin-right: 0;"></i>
              </el-dropdown-item>
              <el-dropdown-item command="changeTheme">
                切换主题
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main class="main">
      <keep-alive>
        <!-- keep-alive 保持子页面状态 -->
        <router-view v-if="$route.meta['keepAlive']"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta['keepAlive']"></router-view>
    </el-main>
  </el-container>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  props: {},
  components: {},
  data() { return {} },
  computed: {
    defaultActive() {
      return this.$route.name
    },
    ...mapGetters({
      mode: 'profile/getMode'
    })
  },
  watch: {},
  methods: {
    handleCommand(command) {
      if (command === 'changeTheme') {
        const documentElement = document.documentElement
        const currentTheme = documentElement.getAttribute('data-theme')
        if (!currentTheme || currentTheme === 'dark') {
          documentElement.setAttribute('data-theme', 'light')
          localStorage.setItem('data-theme', 'light')
        } else {
          documentElement.setAttribute('data-theme', 'dark')
          localStorage.setItem('data-theme', 'dark')
        }
      } else if (command === 'frontend') {
        this.changeMode({ mode: 'frontend' })
        this.$message({ message: '前端解析', type: 'info', duration: 1000 })
      } else if (command === 'backend') {
        this.changeMode({ mode: 'backend' })
        this.$message({ message: '后端解析', type: 'info', duration: 1000 })
      }
    },
    ...mapActions({
      changeMode: 'profile/changeMode'
    })
  },
  beforeCreate() { },
  created() { },
  beforeDestroy() { },
  destroyed() { }
}
</script>
<style lang="scss" scoped>
.header {
  padding: 0;

  .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;

    li {
      &.el-menu-item {
        border-bottom: 0 !important;
      }
    }

    .flex-1 {
      flex: 1;
    }

    .dropdown {
      padding: 0;
      min-width: 100px;

      div {
        width: 100%;

        span {
          display: block;
        }
      }
    }
  }
}

.main {
  padding: 0;
  height: calc(100vh - 60px);
}
</style>
